---
layout: default
title: Photon · Getting started
---


<div class="sub-masthead">
  <div class="container">
    {% include nav.html %}
    <div class="subpage-header-content">
      <h1 class="subpage-title">Getting started</h1>
      <p class="subpage-lead">Just download Photon and you'll be well on your way</p>
    </div>
  </div>
</div>

<section class="docs-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>What's included</h2>
        <p>Photon is downloadable in two forms, within which you'll find the following directories and files, logically grouping common and compiled resources.</p>

        <hr class="docs-hr">

        <h3>Precompiled Photon</h3>
        <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) photon. You'll see something like this:</p>

{% highlight html %}
photon/
├── css/
│   ├── photon.css
├── fonts/
│   ├── photon-entypo.eot
│   ├── photon-entypo.svg
│   ├── photon-entypo.ttf
│   └── photon-entypo.woff
└── template-app/
    ├── js/
    │   └── menu.js
    ├── app.js
    ├── index.html
    └── package.json
{% endhighlight %}

        <p>This is the most basic form of Photon: precompiled files for quick drop-in usage in nearly any Electron project. We provide compiled CSS (`photon.*`). We also include the Entypo fonts and a template Electron application for you to quickly get started.</p>


        <hr class="docs-hr">

        <h3>Photon source code</h3>
        <p>The Photon source code download includes the precompiled CSS, and font assets, along with source Sass, and documentation. More specifically, it includes the following and more:</p>
{% highlight html %}
photon/
├── sass/
├── fonts/
├── dist/
│    ├── css/
│    ├── fonts/
│    └── template-app/
└── docs/
{% endhighlight %}

        <p>The <code>sass/</code> and <code>fonts/</code> are the source code for our CSS and icon fonts (respectively).
        The <code>dist/</code> folder includes everything listed in the precompiled download section above.
        The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Photon usage.
        Beyond that, any other included file provides support for packages, license information, and development.</p>
      </div>
      <div class="col col-one-third">
        <h3>Photon</h3>
        <p class="download-decription">Compiled CSS and fonts. No docs or original source files are included.</p>
        <a class="btn" href="https://github.com/connors/photon/releases/download/v0.1.2-alpha/photon-0.1.2-dist.zip">Download</a>

        <hr class="docs-hr">


        <h3>Source code</h3>
        <p class="download-decription">If you haven't already, download the source code for Photon.</p>
        <a class="btn" href="https://github.com/connors/photon/archive/v0.1.2-alpha.zip">Download</a>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
    <div class="container">
      <div class="col-group">
        <div class="col">
          <h2>Application layout</h2>
          <p class="component-description">Every Photon application has the same basic structure that consists of
          a main <code>.window</code> element and corresponding <code>.window-content</code> wrapper.</p>
{% highlight html %}
<div class="window">
  <div class="window-content">
    ...
  </div>
</div>
{% endhighlight %}
        </div>
        <div class="col">
          <div class="example-container example-component-container example-component-window">
            <iframe class="component-example" src="/components/basic-window.html"></iframe>
          </div>
        </div>
      </div>
    </div>
</section>

<section class="component-section">
    <div class="container">
      <div class="col-group">
        <div class="col">
          <h2>Paned layout</h2>
          <p class="component-description">Divide up your applications content any way you want using <code>.pane-group</code> and <code>.pane</code> elements.
          Add as many panes as you need. They'll layout out evenly across the application.</p>
{% highlight html %}
<div class="window">
  <div class="window-content">
    <div class="pane-group">
      <div class="pane">...</div>
      <div class="pane">...</div>
      <div class="pane">...</div>
    </div>
  </div>
</div>
{% endhighlight %}
        </div>
        <div class="col">
          <div class="example-container example-component-container example-component-window">
            <iframe class="component-example" src="/components/three-paned.html"></iframe>
          </div>
        </div>
      </div>
    </div>
</section>

<section class="component-section">
    <div class="container">
      <div class="col-group">
        <div class="col">
          <h2>Sidebar layout</h2>
          <p class="component-description">Sidebars are useful for housing navigation or other supplemental information in your application.
            The optional <code>.sidebar</code> class sets the pane's background color to gray.</p>
{% highlight html %}
<div class="window">
  <div class="window-content">
    <div class="pane-group">
      <div class="pane-sm sidebar">...</div>
      <div class="pane">...</div>
    </div>
  </div>
</div>
{% endhighlight %}
        </div>
        <div class="col">
          <div class="example-container example-component-container example-component-window">
            <iframe class="component-example" src="/components/basic-sidebar.html"></iframe>
          </div>
        </div>
      </div>
    </div>
</section>

<section class="component-section">
    <div class="container">
      <div class="col-group">
        <div class="col">
          <h2>Mini-sidebar layout</h2>
          <p class="component-description">If a smaller sidebar is what you need, look no further.</p>
{% highlight html %}
<div class="window">
  <div class="window-content">
    <div class="pane-group">
      <div class="pane-mini sidebar">...</div>
      <div class="pane">...</div>
    </div>
  </div>
</div>
{% endhighlight %}
        </div>
        <div class="col">
          <div class="example-container example-component-container example-component-window">
            <iframe class="component-example" src="/components/mini-sidebar.html"></iframe>
          </div>
        </div>
      </div>
    </div>
</section>

<section class="component-section">
    <div class="container">
      <div class="col-group">
        <div class="col">
          <h2>Common layout</h2>
          <p class="component-description">Many applications follow the same simple layout with a header, content, and footer structure.
          That's super easy to build in Photon.</p>
{% highlight html %}
<div class="window">
  <header class="toolbar toolbar-header">
    <h1 class="title">Header</h1>
  </header>
  <div class="window-content">
    <div class="pane-group">
      <div class="pane-sm sidebar">...</div>
      <div class="pane">...</div>
    </div>
  </div>
  <footer class="toolbar toolbar-footer">
    <h1 class="title">Footer</h1>
  </footer>
</div>
{% endhighlight %}
        </div>
        <div class="col">
          <div class="example-container example-component-container example-component-window">
            <iframe class="component-example" src="/components/common-layout.html"></iframe>
          </div>
        </div>
      </div>
    </div>
</section>

<section class="docs-section basic-template-section">
    <div class="container">
      <div class="col-group">
        <div class="col">
          <h2>Basic Template</h2>
          <p></p>
{% highlight html %}
<!DOCTYPE html>
<html>
  <head>
    <title>Photon</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="photon.css">

    <!-- Electron Javascript -->
    <script src="app.js" charset="utf-8"></script>
  </head>

  <body>
    <!-- Wrap your entire app inside .window -->
    <div class="window">
      <!-- .toolbar-header sits at the top of your app -->
      <header class="toolbar toolbar-header">
        <h1 class="title">Photon</h1>
      </header>

      <!-- Your app's content goes inside .window-content -->
      <div class="window-content">
        <div class="padded-more">
          <h1>Welcome to Photon</h1>
          <p>
            Thanks for downloading Photon. This is an example HTML page that's linked up to compiled Photon CSS, has the proper meta tags
            and the HTML structure.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
{% endhighlight %}
      </div>
    </div>
  </div>
</section>
